<template>
  <view class="spotContent">
    <view class="grid-body mt-30">
      <view class="check grid-common">
        <view class="title flex">
          <image class="icon-style" src="/static/images/point-check.png" mode="aspectFill"></image>
          <text class="flex-1">{{ detail.taskName }}</text>
        </view>
        <view class="text"
          >任务编号：
          <text>{{ detail.taskCode || '--' }}</text>
        </view>
        <view class="text"
          >设备分组：
          <text>{{ detail.deviceGroup || '--' }}</text>
        </view>
        <view class="text"
          >设备类型：
          <text>{{ detail.deviceType || '--' }}</text>
        </view>
        <view class="text"
          >设备级别：
          <text>{{ detail.deviceLevel || '--' }}</text>
        </view>
        <view class="text"
          >润滑设备：
          <text>{{ detail.deviceName || '--' }}</text>
        </view>
        <view class="text"
          >润滑部门：
          <text>{{ detail.deptName || '--' }}</text>
        </view>
        <view class="text"
          >所属场所：
          <text>{{ detail.areaName || '--' }}</text>
        </view>
        <view class="text"
          >润滑人员：
          <text>{{ detail.userNames || '--' }}</text>
        </view>
        <view class="text"
          >技术员：
          <text>{{ detail.technicianName || '--' }}</text>
        </view>
        <view class="text"
          >润滑开始时间：
          <text style="width: 64%">{{ detail.startTime ? detail.startTime.slice(0, 16) : '--' }}</text>
        </view>
        <view class="text"
          >润滑截止时间：
          <text style="width: 64%">{{ detail.endTime ? detail.endTime.slice(0, 16) : '--' }}</text>
        </view>
        <view class="text"
          >任务完成方式：
          <text style="width: 64%">{{ detail.completionModeLabel || '--' }}</text>
        </view>
      </view>
    </view>
    <view class="item-content">
      <view class="hidden-title">润滑事项状态</view>
      <view class="background-white" v-if="detail.subItems && detail.subItems.length">
        <view v-for="(lubricationItem, lubricationIndex) in detail.subItems" :key="lubricationIndex">
          <view class="step-block">
            <view class="step">
              <!--<view :class="['step-no', `color-${timeStatus}`]">{{ lubricationIndex+1 }}</view>-->

              <view class="step-no">
                <image class="icon-style" :src="getImage(lubricationItem)" mode="aspectFill" />
              </view>
              <view class="stepLine" v-show="lubricationIndex !== detail.subItems.length - 1"></view>
            </view>
            <view class="step-content">
              <view class="check grid-common">
                <view class="flex text">
                  <text class="text-label">润滑部位1：</text>
                  <text>{{ lubricationItem.position || '--' }}</text>
                </view>
                <view class="flex text"
                  ><text class="text-label">油脂规格型号：</text>
                  <text>{{ lubricationItem.className || '--' }}</text>
                </view>
                <view class="footer-wrap">
                  <view class="content-wrap"> </view>
                  <view class="button-wrap">
                    <button
                      v-if="['READ', 'CONFIRM'].includes(operate) || lubricationItem.status !== '0'"
                      class="button"
                      @click="viewLubricationItem(lubricationItem)"
                    >
                      查看
                    </button>
                    <button
                      v-else-if="lubricationItem.status === '0'"
                      class="button button-orange"
                      @click="excuteLubricationItem(lubricationItem)"
                    >
                      润滑
                    </button>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="operate === 'CONFIRM'" class="confirm-form">
        <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="120px" labelPosition="top">
          <uni-forms-item name="record" label="事项记录">
            <textarea v-model="formData.record" class="text-area" placeholder="请输入事项记录" maxlength="1000" />
          </uni-forms-item>
        </uni-forms>
        <view class="submit-group">
          <button class="u-button block" :ripple="true" @click="submit">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryLubricationTaskDetail, confirmLubricationTask } from '@/api/equipment/lubrication'

export default {
  data() {
    return {
      taskId: '',
      operate: '',
      from: '',
      detail: {},
      formData: {
        record: ''
      },
      rules: {
        record: {
          rules: [
            {
              required: true,
              errorMessage: '事项记录不能为空'
            }
          ]
        }
      },
      // 当前时间: 1<开始时间 2[开始时间,截止时间) 3>=截止时间
      timeStatus: 0
    }
  },
  onLoad({ taskId, operate, from }) {
    this.operate = operate
    this.taskId = taskId
    this.from = from
    this.getDetail()
  },
  onShow() {
    this.getDetail()
  },
  onPullDownRefresh() {
    this.getDetail()
  },
  methods: {
    getImage(item) {
      switch (item.status || item.resultStatus) {
        case '1':
          return '/static/images/notOverdueComplete.png'
        case '4':
          return '/static/images/overdueComplete.png'
        case '3':
          return '/static/images/overdueNotComplete.png'
        case '0':
          return '/static/images/notOverdueNotComplete.png'
        default:
          return '/static/images/notOverdueComplete.png'
      }
    },
    viewLubricationItem(item) {
      let itemId
      if (item.status && item.status !== '0') {
        itemId = item.standardId
      } else itemId = item.id
      uni.navigateTo({
        url: `/pages/work/intelligentPatrolInspection/lubricationMatter/itemDetail?title=${this.detail.deviceName}&taskId=${this.taskId}&itemId=${itemId}&from=${this.from}`
      })
    },
    excuteLubricationItem(item) {
      uni.navigateTo({
        url: `/pages/work/intelligentPatrolInspection/lubricationMatter/lubrication?title=${this.detail.deviceName}&taskId=${this.taskId}&itemId=${item.taskSubItemId}&standardId=${item.standardId}`
      })
    },
    getDetail() {
      queryLubricationTaskDetail(this.taskId).then(({ data }) => {
        this.detail = data
        this.detail.subItems = this.operate === 'EXECUTE' ? data.subItems : data.standardItems
        const { startTime, endTime } = this.detail
        if (!startTime || !endTime) return
        const current = new Date().getTime(),
          start = new Date(startTime).getTime(),
          end = new Date(endTime).getTime()
        if (current < start) this.timeStatus = 1
        else if (current >= end) this.timeStatus = 3
        else this.timeStatus = 2
      })
    },
    submit() {
      this.$refs.form.validate().then(async (valid) => {
        if (valid) {
          await confirmLubricationTask(this.taskId, this.formData)
          this.$modal.msgSuccess('保存成功')
          uni.navigateBack()
        }
      })
    }
  }
}
</script>

<style lang="scss">
.spotContent {
  .item-content {
    .hidden-title {
      background: #f5f5f5;
      padding: 20rpx;
      padding-top: 0rpx;
      color: #999;
    }

    .step-block {
      width: 100%;
      display: flex;
    }

    .step {
      width: 10%;
      margin-left: 16px;
      display: flex;
      flex-direction: column;

      .step-no {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
      }

      .color-1 {
        background-color: #999;
      }

      .color-2 {
        background-color: #95ee9a;
      }

      .color-3 {
        background-color: orange;
      }

      .stepLine {
        width: 2px;
        margin-left: 11px;
        margin-bottom: 2px;
        background-color: rgb(208, 208, 208);
        flex: 1;
      }

      .icon-style {
        width: 46rpx;
        height: 46rpx;
      }
    }

    .step-content {
      flex: 1;

      .grid-common {
        padding: 16px;
        margin-bottom: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-right: 16px;
      }

      .check {
        .title {
          font-size: 34rpx;
          font-weight: 700;
        }

        .icon-style {
          width: 52rpx;
          height: 52rpx;
          margin-right: 20rpx;
        }

        .text {
          color: #999;

          text {
            color: #333;
            display: inline-block;

            &.text-grey {
              color: #999;
            }

            &.w-50 {
              width: 50%;
            }
          }
        }

        .flex-text {
          padding-top: 24rpx;
          display: flex;
          color: #999;

          text {
            color: #333;
            display: inline-block;
          }
        }

        .bor-top {
          padding-top: 20rpx;
          border-top: 1px solid #d5d7e3;
        }
      }
    }

    .title {
      border: none;
      text-align: center;
      height: 30px;
    }
  }

  .grid-body {
    background-color: transparent;

    .grid-common {
      margin-bottom: 30rpx;
      background-color: #fff;
      border-radius: 20rpx;
    }

    .check {
      .title {
        font-size: 34rpx;
        font-weight: 700;
      }

      .icon-style {
        width: 52rpx;
        height: 52rpx;
        margin-right: 20rpx;
      }

      .text {
        color: #999;

        text {
          width: 76%;
          color: #333;
          display: inline-block;

          &.text-grey {
            color: #999;
          }

          &.w-50 {
            width: 50%;
          }
        }
      }

      .flex-text {
        padding-top: 24rpx;
        display: flex;
        color: #999;

        text {
          color: #333;
          display: inline-block;
        }
      }

      .bor-top {
        padding-top: 20rpx;
        border-top: 1px solid #d5d7e3;
      }
    }
  }

  .confirm-form {
    .uni-forms {
      height: 240px;
    }

    width: 100%;
    background: #fff;
    padding: 10px 16px;
  }
}
</style>
